<template>
  <div id="LessonPlan">
    <a-form layout="inline" style="margin-bottom: 8px">
      <a-form-item label="关键字" class="searchItem">
        <a-input v-model="keyword" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="">
        <a-button type="primary" @click="getData" style="margin-left: 10px">
          搜索
        </a-button>
        <a-button type="primary" @click="addClick" style="margin-left: 10px">
          新增
        </a-button>
      </a-form-item>
    </a-form>
    <a-table
      bordered
      :scroll="{ y: 500 }"
      :columns="columns"
      style="margin-top: 16px"
      :data-source="tableData"
      :pagination="tablePagination"
      :rowKey="(record, index) => index"
      @change="handleTableChange"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <!-- <a-dropdown-button v-if="record.operation">
          操作
          <a-menu slot="overlay">
            <a-menu-item
              v-if="$store.state.userData.roleName == 'educator'"
              key="1"
              @click="editClick(record)"
            >
              修改信息
            </a-menu-item>
            <a-menu-item key="2" @click="viewClick(record, '课程资源')">
              课程资源
            </a-menu-item>
            <a-menu-item key="3" @click="viewClick(record, '训练计划')">
              训练计划
            </a-menu-item>
            <a-menu-item key="4" @click="deleteClick(record)">
              删除
            </a-menu-item>
          </a-menu>
        </a-dropdown-button> -->
        <div v-if="$store.state.userData.roleName == 'educator'">
          <a-button
            v-if="record.operation"
            type="primary"
            @click="editClick(record)"
            >修改信息</a-button
          >
          <a-button
            v-if="record.operation"
            type="primary"
            @click="viewClick(record, '课程资源')"
            style="margin-left: 10px"
            >课程资源</a-button
          >
          <a-button
            v-if="record.operation"
            type="primary"
            @click="viewClick(record, '训练计划')"
            style="margin-left: 10px"
            >训练计划</a-button
          >
          <a-button
            v-if="record.operation"
            type="danger"
            style="margin-left: 10px"
            @click="deleteClick(record)"
            >删除</a-button
          >
        </div>
        <div v-if="$store.state.userData.roleName == 'student'">
          <a-button
            type="primary"
            @click="viewClick(record, '课程资源')"
            style="margin-left: 10px"
            >课程资源</a-button
          >
          <a-button
            type="primary"
            @click="viewClick(record, '训练计划')"
            style="margin-left: 10px"
            >训练计划</a-button
          >
        </div>
      </template>
    </a-table>
    <a-modal
      v-model="visible"
      :maskClosable="false"
      :title="title"
      @cancel="handleCancel"
    >
      <a-form-model
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 12 }"
        ref="formRef"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item label="课程计划名称" prop="planName">
          <a-input v-model="form.planName" />
        </a-form-model-item>
        <a-form-model-item label="课程基本信息" prop="curriculumId">
          <a-select v-model="form.curriculumId">
            <a-select-option
              v-for="item in curriculumIdList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="开课时间" prop="time">
          <a-date-picker
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            v-model="form.time"
            style="width: 236px"
          />
        </a-form-model-item>
        <a-form-model-item label="开课地点" prop="place">
          <a-input v-model="form.place" />
        </a-form-model-item>
        <a-form-model-item label="开课老师" prop="teacher">
          <a-input v-model="form.teacher" />
        </a-form-model-item>
        <a-form-model-item label="参与学员所属届" prop="period">
          <a-select v-model="form.period">
            <a-select-option
              v-for="item in yearList"
              :key="item"
              :value="item"
              >{{ item }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="参与学员所属班级" prop="classGrade">
          <a-select v-model="form.classGrade">
            <a-select-option
              v-for="item in classList"
              :key="item"
              :value="item"
              >{{ item }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="训练计划" prop="trainingPlan">
          <a-select
            v-model="form.trainingPlan"
            mode="multiple"
            :maxTagCount="1"
          >
            <a-select-option
              v-for="item in trainingPlanList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item> -->
      </a-form-model>
      <template slot="footer">
        <a-button key="back" class="modalCancel" @click="handleCancel"
          >取消</a-button
        >
        <a-button key="submit" @click="primaryClick" type="primary">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
  
<script>
import moment from "moment";
export default {
  props: {
    role: {}, //3是管理,1是学员
  },
  data() {
    return {
      keyword: "",
      classList: [],
      yearList: [],
      classNameList: [],
      trainingPlanList: [],
      curriculumIdList: [], //课程基本信息下拉
      form: {
        id: null, //课程计划id
        curriculumId: "", //课程基本信息id
        planName: "", // 课程计划名称
        time: "", //开课时间
        place: "", //开课地点
        teacher: "", //开课老师
        period: "", //参与学员所属届
        classGrade: "", //参与学员所属班级
      },
      rules: {
        curriculumId: [
          { required: true, message: "请选择课程基本信息", trigger: "blur" },
        ],
        planName: [
          { required: true, message: "请选择课程名称", trigger: "blur" },
        ],
        time: [
          { required: true, message: "请输入开课时间", trigger: "change" },
        ],
        place: [{ required: true, message: "请输入开课地点", trigger: "blur" }],
        teacher: [
          { required: true, message: "请输入开课老师", trigger: "blur" },
        ],
        period: [
          { required: true, message: "请选择参与学员所属届", trigger: "blur" },
        ],
        classGrade: [
          {
            required: true,
            message: "请选择参与学员所属班级",
            trigger: "blur",
          },
        ],
      },
      visible: false,
      title: null,
      columns: [
        //主页table列的配置
        {
          title: "序列号",
          dataIndex: "key",
          scopedSlots: { customRender: "key" },
        },
        {
          title: "课程计划名称",
          dataIndex: "planName",
          customRender: (text, record) => {
            return record.planName ? record.planName : "—";
          },
        },
        {
          title: "开课时间",
          dataIndex: "time",
          customRender: (text, record) => {
            return record.time ? record.time : "—";
          },
        },
        {
          title: "开课地点",
          dataIndex: "place",
          customRender: (text, record) => {
            return record.place ? record.place : "—";
          },
        },
        {
          title: "开课老师",
          dataIndex: "teacher",
          customRender: (text, record) => {
            return record.teacher ? record.teacher : "—";
          },
        },
        {
          title: "参与学员所属届",
          dataIndex: "period",
          customRender: (text, record) => {
            return record.period ? record.period : "—";
          },
        },
        {
          title: "参与学员所属班级",
          dataIndex: "classGrade",
          customRender: (text, record) => {
            return record.classGrade ? record.classGrade : "—";
          },
        },
        // {
        //   title: "训练计划",
        //   dataIndex: "planName",
        //   customRender: (text, record) => {
        //     return record.planName ? record.planName : "—";
        //   },
        // },
        {
          title: "操作",
          align: "center",
          width: 400,
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        total: 0,
        current: 1,
        pageSize: 10,
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  created() {
    this.getData();
    this.getClassList(); //获取所属班级的下拉
    this.getYearList(); //获取所属届的下拉
    this.getTrainingPlanList(); //获取训练计划
    this.getCurriculumIdList(); //获取课程基本信息
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.tablePagination.current = pagination.current;
      this.tablePagination.pageSize = pagination.pageSize;
      this.getData();
    },
    deleteClick(row) {
      //点击删除
      let data = {
        id: row.id,
      };
      let that = this;
      this.$confirm({
        title: "确认删除?",
        content: "您确定要删除此项吗?",
        onOk() {
          that.$axios
            .delete("/curriculum/plan/delete", { data })
            .then((res) => {
              if (res.code == 200) {
                that.$message.success("删除成功");
                that.getData();
              }
            });
        },
        onCancel() {
          console.log("取消删除");
        },
      });
    },
    getTrainingPlanList() {
      //训练计划的下拉
      this.$axios.get("/training/plan/options").then((res) => {
        this.trainingPlanList = res.data;
      });
    },
    getClassList() {
      //获取所属班级的下拉
      this.$axios.get("/curriculum/plan/grades").then((res) => {
        this.classList = res.data;
      });
    },
    getYearList() {
      //获取所属届的下拉
      this.$axios.get("/curriculum/plan/periods").then((res) => {
        this.yearList = res.data;
      });
    },
    getCurriculumIdList() {
      //获取课程基础信息的下拉
      this.$axios.get("/curriculum/options").then((res) => {
        this.curriculumIdList = res.data;
      });
    },
    addClick() {
      this.title = "新增";
      this.getCurriculumIdList(); //获取课程基础信息的下拉
      this.getClassList(); //获取所属班级的下拉
      this.getYearList(); //获取所属届的下拉
      this.visible = true;
    },
    editClick(row) {
      //编辑
      this.getCurriculumIdList(); //获取课程基础信息的下拉
      this.getClassList(); //获取所属班级的下拉
      this.getYearList(); //获取所属届的下拉
      this.$axios
        .get("/curriculum/plan/detail", {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          this.form.id = row.id; //课程计划id
          this.form.curriculumId = res.data.curriculumId; //课程id
          this.form.curriculumName = res.data.curriculumName; //课程名
          this.form.planName = res.data.planName; //课程计划名称
          this.form.time = res.data.time; //开课时间
          this.form.place = res.data.place; //开课地点
          this.form.teacher = res.data.teacher; //老师
          this.form.classGrade = res.data.classGrade; //所属班级
          this.form.period = res.data.period; //所属届
          this.title = "编辑";
          this.visible = true;
        });
    },
    handleCancel() {
      this.form.id= null; //课程计划id
      this.form.curriculumId= ""; //课程基本信息id
      this.form.planName= ""; // 课程计划名称
      this.form.time= ""; //开课时间
      this.form.place= ""; //开课地点
      this.form.teacher= ""; //开课老师
      this.form.period= ""; //参与学员所属届
      this.form.classGrade= ""; //参与学员所属班级

      this.$refs.formRef.resetFields(); //重置表单验证
      this.visible = false;
    },
    primaryClick() {
      this.$nextTick(() => {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            let data = this.form;
            // let data = {
            //   id: this.form.id,
            //   courseId: this.form.courseName, // 课程名称
            //   time: this.form.time
            //     ? moment(this.form.time).format("YYYY-MM-DD HH:mm:ss")
            //     : null, //开课时间
            //   location: this.form.location, //开课地点
            //   teacher: this.form.teacher, //开课老师
            //   year: this.form.year, //参与学员所属届
            //   studentClass: this.form.studentClass, //参与学员所属班级
            //   subjectIds:
            //     this.form.trainingPlan.length > 0
            //       ? this.form.trainingPlan.join(",")
            //       : null, //训练计划
            // };
            if (this.title == "新增") {
              this.$axios.post("/curriculum/plan/create", data).then((res) => {
                if (res.code == 200) {
                  this.$message.success("新增成功");
                  this.getData();
                  this.handleCancel();
                }
              });
            } else if (this.title == "编辑") {
              this.$axios.put("/curriculum/plan/update", data).then((res) => {
                if (res.code == 200) {
                  this.$message.success("编辑成功");
                  this.getData();
                  this.handleCancel();
                }
              });
            }
          } else {
            console.log("校验失败");
          }
        });
      });
    },
    async getData() {
      let { data } = await this.$axios.get("/curriculum/plan/page/list", {
        params: {
          keyword: this.keyword,
          page: this.tablePagination.current,
          size: this.tablePagination.pageSize,
        },
      });

      data.records.forEach((item, index) => {
        item.key = index + 1;
      });
      this.tableData = data.records;
      this.tablePagination.total = data.total;
    },
    viewClick(row, type) {
      row.type = type;
      this.$emit("changeIsDetail", {
        data: row,
        status: true,
      });
    },
  },
};
</script>
  
  <style>
</style>